<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../common/style/reset.css" />
    <title>菜单</title>
    <style>
      .theme{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .theme .theme-box{
        width: 15px;
        height: 15px;
        padding: 2px;
      }

      .theme .theme-box:hover{
        background-color: rgba(0, 0, 0, 0.2);
      }      

      .theme-item{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }


      
    </style>
  </head>
  <body>
    <liu-menu type='["edit"]'>
      <div class="theme"></div>
    </liu-menu>
  </body>
  <script type="module">
    import LiuMenu from "../components/Menu.js";
    customElements.define("liu-menu", LiuMenu);
    let themeList = [
      {
        name: "january-theme",
        themeColor: "#cad1eb",
      },
      {
        name: "february-theme",
        themeColor: "#fadbd9",
      },
      {
        name: "march-theme",
        themeColor: "#fbe2ba",
      },
      {
        name: "april-theme",
        themeColor: "#bfe0cd",
      },
      {
        name: "may-theme",
        themeColor: "#bccde9",
      },
      {
        name: "june-theme",
        themeColor: "#f4b3ad",
      },
      {
        name: "july-theme",
        themeColor: "#f6c9dd",
      },
      {
        name: "august-theme",
        themeColor: "#d2ccce",
      },
      {
        name: "september-theme",
        themeColor: "#bbd5f0",
      },
      {
        name: "october-theme",
        themeColor: "#dfe7f4",
      },
      {
        name: "november-theme",
        themeColor: "#d2d5dc",
      },
      {
        name: "december-theme",
        themeColor: "#bde1d7",
      },
    ];


    const themeEl = document.querySelector(".theme");

    themeList.forEach(item=>{
      const theme = document.createElement("div");
      const themoBox = document.createElement("div");
      themoBox.classList.add("theme-box")
      theme.classList.add("theme-item");
      theme.setAttribute("data-theme", item.name);
      theme.setAttribute("data-color", item.themeColor);
      theme.style.backgroundColor = item.themeColor;
      theme.addEventListener("click", (e)=>{
        let name = e.target.getAttribute("data-theme");
        if(window.ipcRenderer){
          window.ipcRenderer.sendTo( window.senderId, "setTheme", name);
        }
      })
      themoBox.appendChild(theme)
      themeEl.appendChild(themoBox);
    })
  </script>
</html>
